<template>
  <div class="question-list">
    <div class="question-list-title">问答主题</div>
    <div class="question-list-container">
      <div class="qlist-function">
        <div class="qlist-search">
          <a-input placeholder="搜索关键字"
                   v-model="questionSearch"
                   class="qlist-input-search" />
          <a-button type="primary"
                    @click="handleSearch">
            查询
          </a-button>
        </div>
        <a-radio-group class="qlist-tab"
                       v-model="tabType"
                       button-style="solid"
                       @change="handleOrder">
          <a-radio-button value="a">
            最新消息
          </a-radio-button>
          <a-radio-button value="b">
            全部消息
          </a-radio-button>
          <a-radio-button value="c">
            未读消息
          </a-radio-button>
        </a-radio-group>
      </div>
      <div class="qlist-title">
        <span>主题名称</span>
        <span>动态</span>
      </div>
      <div class="qlist-item-container">
        <div class="qlist-item"
             v-for="question in showingQuestionList"
             :key="question.id"
             @click="handleClick(question.id, question.loginName)">
          <div class="qitem-title">{{question.questionTitle}}</div>
          <div class="qitem-others">
            <div class="qitem-pre"><span class="pre-name">{{question.loginName}}</span><span class="pre-time">{{question.modifyTime}}</span></div>
            <div class="qitem-post">
              <!-- <span class="post-scan">浏览：86</span> -->
              <span class="post-reply">回复：{{question.commentNum}}</span>
            </div>
          </div>
        </div>
        <a-pagination class="quiston-pagination"
                      :page-size-options="pageSizeOptions"
                      show-size-changer
                      :page-size="pageSize"
                      :total="total"
                      @change="onPageChange"
                      @showSizeChange="onShowSizeChange">
          <template slot="buildOptionText"
                    slot-scope="props">
            <span>{{ props.value }}条/页</span>
          </template>
        </a-pagination>
      </div>
    </div>
    <a-modal class="question-detail"
             :visible="visible"
             :confirm-loading="confirmLoading"
             :footer="null"
             @cancel="handleCancel">
      <template slot="title">查看主题</template>
      <a-skeleton :loading="detailLoading">
        <div class="detail-content">
          <div class="detail-question">
            <div class="dquestion-name">{{detailQuestion.name}} 提问：</div>
            <!-- <div class="dquestion-time">{{detailQuestion.time}}</div> -->
            <div class="dquestion-title">{{detailQuestion.questionTitle}}</div>
            <div class="dquestion-content">{{detailQuestion.questionContent}}</div>
            <div class="dquestion-reply qdcontent-reply"
                 @click="addReply(detailQuestion.questionId, detailQuestion.name)"><img src="../../assets/image/train/reply.svg" alt="回复"/>回复</div>
          </div>
          <div class="detail-comment-list">
            <div class="dcomment-item"
                 v-for="comment in detailQuestion.commentList"
                 :key="comment.id">
              <div class="dcitem-name qdcontent-name">{{comment.loginName}} 回复 题主</div>
              <div class="dcitem-content">{{comment.commentContent}}</div>
              <div class="dquestion-reply qdcontent-reply"
                   @click="addReply(detailQuestion.questionId, comment.loginName, comment.id)"><img src="../../assets/image/train/reply.svg" alt="回复"/>回复</div>
              <div class="dcitem-reply-list">
                <div class="dcr-item"
                     v-for="reply in comment.childList"
                     :key="reply.id">
                  <div class="dcritem-name qdcontent-name">{{reply.replyUserLoginName}} 回复 {{reply.loginName}}</div>
                  <div class="dcritem-content">{{reply.commentContent}}</div>
                  <div class="dquestion-reply qdcontent-reply"
                       @click="addReply(detailQuestion.questionId, reply.loginName, comment.id)"><img src="../../assets/image/train/reply.svg" alt="回复"/>回复
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-skeleton>
    </a-modal>
    <a-modal class="reply-modal"
             :visible="replyVisible"
             :confirm-loading="replyConfirmLoading"
             @cancel="handleReplyCancel">
      <template slot="title">添加回复</template>

      <a-form-model ref="replyForm"
                    :model="form"
                    :rules="rules">
        <!-- has-feedback 用于给输入框添加反馈图标-->
        <a-form-model-item prop="reply" has-feedback>
          <a-textarea v-model="form.reply"
                      placeholder="请输入回复"
                      :auto-size="{ minRows: 8, maxRows: 8}" />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button class="purple-button"
                  type="primary"
                  shape="round"
                  @click="handleReply">回复</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>

import api from "./../../common/api"

export default {
  props: {
    refresh: {
      required: false,
    },
  },
  watch: {
    refresh: {
      handler: function () {
        this.handleQuestionList()
      }
    },
  },
  data () {
    return {
      tabType:"a",
      visible: false,
      confirmLoading: false,
      questionList: [],
      questionSearch: "",
      detailQuestion: {},
      detailLoading: true,
      replyVisible: false,
      replyConfirmLoading: true,
      current: 1,
      pageSize: 5,
      pageSizeOptions: ['5', '10', '20'],
      total: 0,
      form: {
        reply: "",
      },
      rules: {
        reply: [
          {
            required: true,
            message: " ",
            trigger: "blur",
            whitespace: true
          },
        ],
      },
      questionName: ""
    }
  },
  computed: {
    showingQuestionList: function () {
      const show = this.questionList.slice(this.pageSize * (this.current - 1), this.pageSize * (this.current))
      return show;
    },
  },
  created () {
    this.handleQuestionList()
    console.log("init", this.refresh)
  },
  methods: {
    //获得问题列表
    handleQuestionList: function () {
      this.$getCPG(api.getQuestionList, { size: 10000, keyword: this.questionSearch }).then((res) => {
        this.questionList = res.data;
        this.total = res.data.length;
        //如果是逆序
        if (this.tabType === "b"){
          this.questionList.reverse();
        }
        //如果是未读消息
        if(this.tabType==="c"){
          this.$getCPG(api.getUnreaded, {}).then((res) => {
            this.questionList = res.data.set;
            this.total = res.data.count;
          })
        }
      })

    },
    handleSearch () {
      console.log("value", this.questionSearch)
      this.handleQuestionList()
    },
    onPageChange (page) {
      this.current = page;
    },
    getDetailQuestion (id) {
      this.detailLoading = true;
      this.$getCPG(api.getDetailQuestion, { questionId: id }).then((res) => {
        this.detailQuestion = {
          name: this.questionName,
          ...res.data
        };
        this.detailLoading = false;
      })
    },
    onShowSizeChange (current, pageSize) {
      this.current = current;
      this.pageSize = pageSize;
    },
   //tab切换
    handleOrder () {
        this.handleQuestionList()
    },
    handleClick (id, name) {
      this.visible = true;
      this.questionName = name;
      this.getDetailQuestion(id);
    },
    handleCancel () {
      this.visible = false;
    },
    addReply (id, name, parentId = null) {
      this.replyVisible = true;
      this.replyInfo =
      {
        commentContent: "",
        parentId: parentId,
        questionId: id,
        replyUserLoginName: name
      }
    },

    handleReply () {
      console.log("reply",this.replyInfo)
      this.$refs.replyForm.validate((valid) => {
        if (valid) {
          console.log("valid")
          this.replyInfo.commentContent = this.form.reply;
          this.$postCPG(api.addReply, this.replyInfo).then((res) => {
            console.log("res:",res)
            if (res.success) {
              this.$message.success("已提交回复√")
              this.replyVisible = false;
              this.getDetailQuestion(this.replyInfo.questionId, this.questionName);
              this.$refs.replyForm.resetFields();  // 清空表单中的内容
              //刷新列表
              this.handleQuestionList()
            } else {
              this.$message.error("出了点小问题，请重试×")
            }
          }).catch(err=>{
            // 500等错误处理（eg. ant message 的显示）集中在axiosCPG.js中，但在这里仍需要捕获
            console.log("err!!!")
          })
        }
      });
    },
    handleReplyCancel () {
      this.replyVisible = false;
      this.$refs.replyForm.resetFields();
    }
  }
}
</script>
<style lang="less" scoped>
.question-list {
  .question-list-title {
    margin: 20px 0;
    height: 25px;
    font-size: 18px;
    font-family: PingFang SC, sans-serif;
    font-weight: bold;
    line-height: 25px;
    color: #242425;
  }
  .question-list-container {
    background-color: #fff;
    .qlist-function {
      height: 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 23px;
      .qlist-search {
        display: flex;
        justify-content: center;
        /deep/ input {
          border-radius: 15px;
          height: 30px;
          width: 330px;
        }
        /deep/ button {
          width: 120px;
          height: 30px;
          margin-left: 20px;
        }
      }
      .qlist-tab {
        height: 45px;
        :nth-child(1) {
          border-radius: 15px 0 0 15px;
        }
        :nth-child(2) {
          border-radius: 0 0px 0px 0;
        }
        :nth-child(3) {
          border-radius: 0 15px 15px 0;
        }
      }
    }
    .qlist-title {
      height: 50px;
      background-color: #f8f8f8;
      font-size: 16px;
      font-family: PingFang SC, sans-serif;
      font-weight: bold;
      line-height: 22px;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      :nth-child(1) {
        margin-left: 65px;
      }
      :nth-child(2) {
        text-align: right;
        margin-right: 120px;
      }
    }
    .qlist-item-container {
      padding: 0 65px;
      .qlist-item {
        padding: 18px 0;
        border-bottom: 1px solid rgba(112, 112, 112, 0.2);
        .qitem-title {
          font-size: 16px;
          font-family: PingFang SC, sans-serif;
          font-weight: 400;
          line-height: 22px;
          color: #333333;
          margin-bottom: 13px;
          // margin: 20px 0 15px 0;
        }
        .qitem-others {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          font-family: PingFang SC, sans-serif;
          font-weight: 400;
          line-height: 20px;
          color: #999999;
          .pre-name {
            font-size: 16px;
            font-family: Microsoft YaHei UI, sans-serif;
            font-weight: 400;
            line-height: 20px;
            color: #41d8b1;
            margin-right: 23px;
          }
          .post-sacn {
            margin-right: 18px;
          }
        }
      }
    }
    .quiston-pagination {
      margin-top: 20px;
      text-align: right;
      padding-bottom: 20px;
    }
  }
}
.question-detail {
  /deep/ .ant-modal-header {
    height: 45px;
    .ant-modal-title {
      font-size: 14px;
      font-family: PingFang SC, sans-serif;
      font-weight: bold;
      line-height: 20px;
      color: #000000;
    }
  }
  /deep/ .ant-modal-body {
    padding: 0 20px;
    font-size: 14px;
    font-family: PingFang SC, sans-serif;
    font-weight: 400;
    line-height: 20px;
    color: #333333;
    max-height: 80vh;
    overflow-y: auto;

    .detail-content {
      .qdcontent-reply {
        text-align: right;
        margin-top: 2px;
        margin-bottom: 10px;
        font-size: 12px;
        font-family: PingFang SC, sans-serif;
        font-weight: 400;
        line-height: 17px;
        color: #666;

        cursor: pointer;
        img {
          margin-right: 7px;
        }
      }
      .qdcontent-name {
        margin-top: 10px;
      }
      .detail-question,
      .dcomment-item,
      .dcr-item {
        border-bottom: 1px solid rgba(112, 112, 112, 0.2);
      }
      .detail-question {
        margin-top: 10px;
        .dquestion-name {
          color: #39be9c;
          margin-bottom: 8px;
        }
      }

      .detail-comment-list {
        .dcomment-item {
          .dcitem-content {
            margin-left: 34px;
          }
          .dcitem-reply-list {
            margin-left: 34px;

            .dcr-item {
              border-top: 1px solid rgba(112, 112, 112, 0.2);
              border-bottom: none;

              .dcritem-content {
                margin-left: 34px;
              }
            }
          }
        }
      }
    }
  }
  /deep/ .ant-modal-footer {
    padding: 0;
    padding-bottom: 25px;
    border: none;
    text-align: center;
    .purple-button {
      width: 120px;
    }
  }
}
.reply-modal {
  /deep/ .ant-modal-header {
    height: 45px;
    .ant-modal-title {
      font-size: 14px;
      font-family: PingFang SC, sans-serif;
      font-weight: bold;
      line-height: 20px;
      color: #000000;
    }
  }
}
</style>
